<template lang="pug">
  el-card(:bodyStyle="{padding: '30px'}" shadow="never" style="border: none")
    .courseDetailWrapper
      .headerBox.tr
        <!--el-button(v-if="info.audited === 0" size="large" round @click="auditHandle(2)" :loading="auditSubmitting") 不通过-->
        <!--el-button(v-if="info.audited === 0" size="large" round @click="auditHandle(1)" :loading="auditSubmitting") 通过-->
        el-button.gradientVertical(size="large" round @click="addVisible = true") 修改
        el-button.gradientVertical(size="large" round @click="download(1)") 下载附件
      el-row(:gutter="40")
        el-col(:span="13")
          .mediaBox
            el-image(v-if="info.resType === 'image'" :src="info.resURL" style="width: 100%; height: 272px" :fit="cover")
            el-image(v-else :src="info.cover" style="width: 100%; height: 272px" :fit="cover")
            <!--video(v-else-if="info.resType === 'video'" :src="info.resURL")-->
        el-col(:span="11")
          .detailBox
            div.title
              img(src="@/assets/miaosu.png")
              h2 {{info.title}}
            p.tags
              span.tag2 {{info.description}}
            .teacher
              .avatarBox
                el-avatar(:src="info.staffHeadImg" :size="28")
              h3.f18 {{info.staffName || '无'}}
            span.tag2 发布时间：{{info.created | dateFilter('YYYY/MM/DD')}}
            p.small
            span 浏览人数：{{info.visitorCount || 0}}
            span(style="padding-left:40px") 好评度：
              span {{info.rankVal || 0}}%
              //- span.tag {{info.positonName || '无'}}
            //- .detail {{info.description}}
            .footerBtns
      div.gais
        div.gaisTitle 课程概述
        .richBox(v-html="info.content")
      //- el-tabs.tabs(v-model="activeTab")
      //-   el-tab-pane(v-for="tab in tabs" :label="tab.label" :name="tab.name" :key="tab.name")

    add-drawer(:visible.sync="addVisible" :id="info.id" type="update" @getList="getInfo" :detail="info")
</template>
<script>
import { docSubmit, getDoc } from './api'
import AddDrawer from './components/addDrawer'
export default {
  components: {
    AddDrawer
  },
  data () {
    return {
      loading: false,
      auditSubmitting: false,
      info: {},
      activeTab: 'overview',
      tabs: [
        { label: '课程概述', name: 'overview' }
      ],
      addVisible: false
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      const { id } = this
      this.loading = true
      getDoc({ id }).then(res => {
        this.info = res
      }).finally(() => {
        this.loading = false
      })
    },
    // 审批
    auditHandle (audited) {
      const { info } = this
      this.auditSubmitting = true
      docSubmit({
        ...info,
        audited
      }).then(() => {
        this.$message.success('提交成功')
        this.getInfo()
      }).finally(() => {
        this.auditSubmitting = false
      })
    },

    download () {
      // console.log(this.info)
      window.open(this.info.resURL, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.courseDetailWrapper {
  .headerBox {
    margin-bottom: 20px
  }

  .mediaBox {
    height: 272px;
    background: #f4f6f8;
  }

  .detailBox {
    h2 {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 24px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    >p {
      line-height: 1;

      +p {
        margin-top: 12px
      }
    }

    .tags {
      .tag {
        display: inline-block;
        background: #FAFAFA;
        border: 1px solid #E8E8E8;
        font-size: 15px;
        font-family: PingFang SC;
        color: #DA473A;
        padding: 0 20px;
        height: 30px;
        line-height: 30px;

        +.tag {
          margin-left: 10px
        }
      }
    }

    p.small {
      margin-top: 62px;

      >span {
        position: relative;

        +span {
          margin-left: 16px;
          padding-left: 16px;

          &::before {
            position: absolute;
            content: '';
            display: block;
            width: 1px;
            background: #999;
            left: 0;
            top: 3px;
            bottom: 3px
          }
        }
      }
    }

    >.teacher {
      margin-top: 24px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .avatarBox {
        width: 28px;
        height: 28px;
        border-radius: 28px;
        display: inline-block;
      }

      >h3 {
        font-size: 17px;
        color: #333;
        margin-left: 10px;
      }

      >.tag {
        border: 1px solid #6E645A;
        margin-left: 10px;
        border-radius: 15px;
        font-size: 13px;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        font-family: PingFang SC;
        color: #6E645A;
      }
    }

    >.detail {
      font-size: 15px;
      font-family: PingFang SC;

      color: #6E645A;
      line-height: 24px;
      margin-top: 30px;
    }

    >.footerBtns {
      margin-top: 20px
    }
  }

  .tabs {
    margin-top: 40px;

    ::v-deep {
      >.el-tabs__header {
        background-color: #FAFAFA;

        .el-tabs__nav-wrap {

          &::after,
          .el-tabs__active-bar {
            display: none;
          }
        }

        .el-tabs__item {
          height: 60px;
          line-height: 60px;
          margin: 0 60px;
          font-size: 17px;
          color: #333333;
          position: relative;

          &.is-active {
            font-weight: bold;

            &::after {
              content: '';
              display: block;
              position: absolute;
              height: 5px;
              background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
              bottom: 0;
              left: 12px;
              right: 12px
            }
          }
        }
      }
    }

    .richBox {
      margin-top: 30px
    }
  }
}

.tag2 {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #55555C;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 40px;
}

.title {
  padding-top: 18px;
  display: flex;
  align-items: center;
  padding-bottom: 8px;

  img {
    margin-right: 8px;
    width: 32px;
    height: 32px;
  }

  h2 {
    padding: 0;
    margin: 0;
  }
}

span {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #55555C;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.gais{
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #EBEBEE;
  .gaisTitle{
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 18px;
color: #000000;
text-align: left;
font-style: normal;
text-transform: none;
  }
}
</style>
